<template>
  <div id="navs">
    <div class="nav-comtent flex_space_btween">
      <div class="left flex_start">
        <router-link to="/" tag="div" class="logo flex_start">
          <div class="images flex_center">
            <img src="./img/logont.png" alt="" />
          </div>
          <p>网易云音乐</p>
        </router-link>
        <div class="locationbtns flex_space_btween">
          <div class="back flex_center" @click="goBack">
            <img src="./img/back.png" alt="" />
          </div>
          <div class="forward flex_center">
            <img src="./img/forward.png" alt="" @click="goForward" />
          </div>
        </div>
        <div class="search flex_start">
          <div class="icon"><img src="./img/search.png" alt="" /></div>
          <input type="text" placeholder="搜索" />
        </div>
        <div class="listen flex_center">
          <img src="./img/record.png" alt="" />
        </div>
      </div>
      <div class="right flex_start">
        <el-dropdown trigger="click">
          <div
            class="login flex_start el-dropdown-link"
            @click="centerDialogVisible = true"
          >
            <div class="icon-user"><img src="./img/user.png" alt="" /></div>
            <p class="name">未登录</p>
            <div class="down"><img src="./img/down.png" alt="" /></div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="login">
      <div class="scanQR">
        <el-dialog
          :visible.sync="centerDialogVisible"
          width="20%"
          center
          top="185px"
          :close-on-click-modal="false"
          :modal="false"
        >
          <el-row type="flex" justify="center">
            <div class="main">
              <p class="QR-title">扫码登录</p>
              <div class="QR-images">
                <img src="" alt="" />
              </div>
              <p>
                使用<a href="https://music.163.com/#/download" target="_blank"
                  >网易云音乐APP</a
                >扫码登录
              </p>
            </div>
          </el-row>

          <div slot="footer" class="dialog-footer">
            <p @click="other">选择其他登录方式 ></p>
          </div>
        </el-dialog>
        <el-dialog
          :visible.sync="centerDialogVisibleOther"
          width="20%"
          center
          top="185px"
          :close-on-click-modal="false"
          :modal="false"
        >
          <el-tooltip
            class="item"
            effect="dark"
            content="扫码登录更安全"
            placement="right"
          >
            <div class="QR-hd" @click.stop="skipQR">
              <img src="../../assets/images/QRhd.png" alt="" /></div
          ></el-tooltip>
          <el-row type="flex" justify="center">
            <div class="main">
              <div class="phone-bk">
                <img src="../../assets/images/phonebk.png" alt="" />
              </div>
              <form action="" class="phone-form">
      <label for="" class="flex_start">
        <div class="area flex_start">
          <img src="../assets/phone.png" alt="" />
          <select name="" id="attr">
            <option value="+86">+86</option>
            <option value="+86">+86</option>
            <option value="+86">+86</option>
            <option value="+86">+86</option>
          </select>
        </div>
        <div class="phone-num">
          <input type="text" placeholder="请输入手机号" class="inphone" @keyup.13="login()"/>
        </div>
      </label>
      <label for="" class="flex_start">
        <img src="../assets/pwd.png" alt="" />
        <div class="phone-num">
          <input type="password" placeholder="请输入密码" class="pwd" @keyup.13="login()"/>
        </div>
      </label>
    </form>
    <button @click="login()">登录</button>
            </div>
          </el-row>

          <div slot="footer" class="dialog-footer other-footer">
            <el-checkbox v-model="checked"
              >同意
              <a
                href="https://st.music.163.com/official-terms/service"
                target="_blank"
                >《服务条款》</a
              >
              <a
                href="https://st.music.163.com/official-terms/privacy"
                target="_blank"
                >《隐私政策》</a
              >
              <a
                href="https://st.music.163.com/official-terms/children"
                target="_blank"
                >《儿童隐私政策》</a
              >
            </el-checkbox>
          </div>
        </el-dialog>
      </div>
      <div class="otherMethod"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navs",
  data() {
    return {
      centerDialogVisible: false,
      centerDialogVisibleOther: false,
      checked: false,
      phone:'',
      phoneSelect: '',
    };
  },
  methods: {
    goBack() {
      window.history.back();
    },
    goForward() {
      window.history.forward();
    },
    other() {
      this.centerDialogVisible = false;
      this.centerDialogVisibleOther = true;
    },
    skipQR() {
      this.centerDialogVisible = true;
      this.centerDialogVisibleOther = false;
    },
  },
  updated() {
    //二维码登录
    if (this.centerDialogVisible === true) {
      this.axios({
        withCredentials: true,
        method: "get",
        url:
          "https://music.hzbiz.net/login/qr/key?timetamp=" +
          new Date().getTime(),
      }).then((res) => {
        this.axios({
          withCredentials: true,
          method: "get",
          url:
            "https://music.hzbiz.net/login/qr/create?qrimg&timetamp=" +
            new Date().getTime(),
          params: {
            key: res.data.data.unikey,
            // qrimg:"",
          },
        }).then((res) => {
          console.log(res.data);
        });
      });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav-comtent {
  width: 100%;
  background-color: #ec4141;
  height: 58px;
  padding: 0 15px;
  box-sizing: border-box;
}
.logo {
  cursor: pointer;
}
.logo p {
  color: #ffffff;
  font-size: 20px;
  margin-left: 5px;
}
.logo .images {
  width: 28px;
  height: 28px;
  overflow: hidden;
}
.logo .images img {
  width: 100%;
}
.locationbtns {
  margin-left: 100px;
}
.locationbtns .back,
.locationbtns .forward {
  width: 23px;
  height: 23px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #d83b3b;
  margin-right: 5px;
  cursor: pointer;
}
.locationbtns img {
  width: 100%;
}
.search {
  width: 130px;
  height: 30px;
  background-color: #d83b3b;
  border-radius: 15px;
  padding-left: 20px;
}
.search .icon {
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.search .icon img {
  width: 100%;
}
.search input {
  background-color: #d83b3b;
  width: 100px;
  color: #f5f5f5f5;
  margin-left: 10px;
}
.listen {
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-color: #d83b3b;
  border-radius: 50%;
  margin-left: 15px;
}
.listen img {
  width: 55%;
}
.icon-user {
  width: 28px;
  height: 28px;
  overflow: hidden;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-right: 15px;
}
.icon-user img {
  width: 100%;
}
.right {
  margin-right: 40px;
}
.right .login {
  cursor: pointer;
}
.right .name {
  color: #fbd9d9;
}
.right .name:hover {
  color: #ffffff;
}
.right .down {
  width: 11px;
  height: 11px;
  overflow: hidden;
  margin-left: 10px;
}
.right .down img {
  width: 100%;
}
.login .dialog-footer {
  cursor: pointer;
}
.login .main .QR-title {
  color: #000;
  font-size: 30px;
  text-align: center;
  margin-bottom: 25px;
}
.login .main .QR-images {
  width: 180px;
  height: 180px;
  overflow: hidden;
  margin: 0 auto;
}
.login .main > p {
  margin-top: 15px;
  text-align: center;
}
.login .dialog-footer {
  margin-bottom: 50px;
}
.login .other-footer {
  font-size: 12px;
}
.login .QR-hd {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 6px;
  top: 6px;
  cursor: pointer;
  z-index: 99;
}
.login .main .phone-bk {
  height: 108px;
  overflow: hidden;
  width: 100%;
}
.input-with-select .icon-phone{
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color:#9A9A9A;
}
</style>
<style>
.login .other-footer .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ec4141;
  border-color: #ec4141;
}
.login .other-footer .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666666;
}
</style>
